<template>
    <z-paging ref="paging" v-model="viewModel" :auto-clean-list-when-reload="false" :auto-scroll-to-top-when-reload="false" cell-height-mode="dynamic" @query="getMoivesList">
        <template #top>
            <view style="position: sticky; top: 0; z-index: 9; background-color: #fff">
                <u-tabs
                    :list="tabsList"
                    @click="tabsClick"
                    lineColor="#5FD05A"
                    :scrollable="false"
                    :activeStyle="{
                        color: '#333333',
                        fontWeight: 'bold',
                    }"
                    :inactiveStyle="{
                        color: '#999999',
                        fontWeight: 'bold',
                    }"
                ></u-tabs>
                <view class="line u-border-bottom"></view>
            </view>
        </template>

        <list-components :viewModel="viewModel" :tabsIndex="tabsIndex"></list-components>
    </z-paging>
</template>

<script>
import { getMovies, getFutureMovies } from '@/sub_pages/movie/common/api/movie.js';

import listComponents from './list.vue';

export default {
    components: {
        listComponents,
    },
    data() {
        return {
            tabsList: [
                {
                    name: '正在热映',
                },
                {
                    name: '即将上映',
                },
            ],
            tabsIndex: 0,
            viewModel: [],
        };
    },
    onLoad() {},

    methods: {
        tabsClick(e) {
            if (this.tabsIndex === e.index) {
                return;
            }
            this.tabsIndex = e.index;
            this.$refs.paging.clear();
            this.$refs.paging.reload();
        },
        async getMoivesList(pageNum) {
            try {
                const api = this.tabsIndex == 0 ? getMovies : getFutureMovies;

                const para = {
                    pageNum,
                    pageSize: 15,
                };
                const res = await api(para);

                const data = res.data.records;

                this.$refs.paging.complete(data);
            } catch (e) {
                this.$refs.paging.complete(false);
            }
        },
    },
};
</script>

<style lang="scss" scoped></style>
